<template>
    <div class="loginIndex">
        <!--头部-->
        <div class="header">
            <img class="logo" src="../../assets/img/login/LoginLOGO.png" alt="">
            <p class="headerTxt">商家后台管理平台</p>
        </div>
        <!--中心内容-->
        <div class="content">
            <div class="loginContent">
                <div class="loginContentWrap">
                    <router-link to="/login">
                        <div>
                            <div><img :class="donghuaIndex1==1?'donghua1':''" :id="donghuaIndex2==1?'donghua2':''" @mouseenter="mouseEnter(1)" @mouseleave="mouseLeave(1)" src="./../../assets/img/login/loginIndexOne.png" alt=""></div>
                            <p>商家中心</p>
                        </div>
                    </router-link>
                    <router-link to="/loginNestOne">
                        <div>
                            <div><img :class="donghuaIndex1==2?'donghua1':''" :id="donghuaIndex2==2?'donghua2':''" @mouseenter="mouseEnter(2)" @mouseleave="mouseLeave(2)" src="./../../assets/img/login/loginIndexTwo.png" alt=""></div>
                            <p>我要开店</p>
                        </div>
                    </router-link>
                    <router-link to="/loginNestTwo">
                        <div>
                            <div><img :class="donghuaIndex1==3?'donghua1':''" :id="donghuaIndex2==3?'donghua2':''" @mouseenter="mouseEnter(3)" @mouseleave="mouseLeave(3)" src="./../../assets/img/login/loginIndexThree.png" alt=""></div>
                            <p>我要供货</p>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <!--底部-->
        <div>
            <loginFooter></loginFooter>
        </div>
    </div>
</template>

<script>
    import  loginFooter  from "./LoginFooter";
    export default {
        name: "Index",
        components:{
            loginFooter
        },
        data(){
            return{
                donghuaIndex1:0,
                donghuaIndex2:0
            }
        },
        methods:{
            mouseEnter(index){
                this.donghuaIndex2 = 0;
                switch(index) {
                    case 1:
                        this.donghuaIndex1 = 1;
                        break;
                    case 2:
                        this.donghuaIndex1 = 2;
                        break;
                    case 3:
                        this.donghuaIndex1 = 3;
                        break;
                    default:
                        this.donghuaIndex1 = 0;
                }
            },
            mouseLeave(index){
                this.donghuaIndex1 = 0;
                switch(index) {
                    case 1:
                        this.donghuaIndex2 = 1;
                        break;
                    case 2:
                        this.donghuaIndex2 = 2;
                        break;
                    case 3:
                        this.donghuaIndex2 = 3;
                        break;
                    default:
                        this.donghuaIndex2 = 0;
                }
            }
        },
        mounted(){

        }
    }
</script>

<style scoped>

    .header{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
    }
    .header .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .header .headerTxt{
        float: left;
        line-height: 90px;
        margin-left: 10px;
        font-family: "PingFang-SC-Bold";
        font-size: 30px;
        color: #E8271A;
        font-weight: Bold;
    }
    /*中心内容*/
    .content{
        width: 100%;
        height: 600px;
         background: url("./../../assets/img/login/loginIndexBJ.png");
        background-size: 100% 600px;
        background-repeat: repeat;
    }
    .loginContent{
        width: 1200px;
        height: 600px;
        margin: 0 auto;
        overflow: hidden;
    }
    .loginContentWrap{
        width: 550px;
        margin: 177px auto;
        display: flex;
        justify-content: space-between;
    }
    .loginContentWrap div{
        width: 80px;
        text-align: center;
        cursor: pointer;
    }
    .loginContentWrap div div{
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loginContentWrap div p{
        width: 150px;
        font-size:18px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        text-align: center;
        color:rgba(255,255,255,1);
        margin-top: 20px;
    }


    /* 动画一,放大 */
    @keyframes donghua1 {
        from {width: 124px;height: 124px;}
        to {width: 150px;height: 150px;}
    }

    @-moz-keyframes donghua1 {
        from {width: 124px;height: 124px;}
        to {width: 150px;height: 150px;}
    }

    @-webkit-keyframes donghua1 {
        from {width: 124px;height: 124px;}
        to {width: 150px;height: 150px;}
    }

    @-o-keyframes donghua1 {
        from {width: 124px;height: 124px;}
        to {width: 150px;height: 150px;}
    }

    /* 动画二,缩小 */
    @keyframes donghua2 {
        from {width: 150px;height: 150px;}
        to {width: 124px;height: 124px;}
    }

    @-moz-keyframes donghua2 {
        from {width: 150px;height: 150px;}
        to {width: 124px;height: 124px;}
    }

    @-webkit-keyframes donghua2 {
        from {width: 150px;height: 150px;}
        to {width: 124px;height: 124px;}
    }

    @-o-keyframes donghua2 {
        from {width: 150px;height: 150px;}
        to {width: 124px;height: 124px;}
    }
    .donghua1{
        animation: donghua1 0.5s forwards;
        -moz-animation: donghua1 0.5s forwards;	/* Firefox */
        -webkit-animation: donghua1 0.5s forwards;	/* Safari 和 Chrome */
        -o-animation: donghua1 0.5s forwards;	/* Opera */
    }
    #donghua2{
        animation: donghua2 0.5s forwards;
        -moz-animation: donghua2 0.5s forwards;	/* Firefox */
        -webkit-animation: donghua2 0.5s forwards;	/* Safari 和 Chrome */
        -o-animation: donghua2 0.5s forwards;	/* Opera */
    }


</style>
